<template>
  <div>
    <el-card class="proCard">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="填写商品信息" />
        <el-step title="填写商品促销" />
        <el-step title="填写商品属性" />
        <el-step title="选择商品关联" />
      </el-steps>
      <div class="list">
        <div>
          <el-form-item label="赠送积分" prop="name">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="赠送成长值" prop="region">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="积分股买限制" prop="region">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="预告商品 ">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="商品上架 ">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="商品推荐 ">
            <div>
              <span>新品</span>
              <el-switch style="margin: 0 10px ;"></el-switch>
            </div>
            <div>
              <span>推荐</span>
              <el-switch style="margin: 0 10px ;"></el-switch>
            </div>
          </el-form-item>
          <el-form-item label="服务保证" prop="delivery">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="无忧退货" />
              <el-checkbox label="快速退款" />
              <el-checkbox label="免费包邮" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="详细页标题" prop="region">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="详细页描述" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品关键字" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品备注" prop="delivery">
            <el-input type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="选择优惠方式" prop="delivery">
            <el-radio-group v-model="radio1" size="large">
              <el-radio-button label="0">无优惠</el-radio-button>
              <el-radio-button label="1">特惠促销</el-radio-button>
              <el-radio-button label="2">会员价格</el-radio-button>
              <el-radio-button label="3">阶梯价格</el-radio-button>
              <el-radio-button label="4">满减价格</el-radio-button>
            </el-radio-group>
            <el-tabs :tab-position="radio1" style="height: 200px" class="demo-tabs">
              <el-tab-pane label="User">User</el-tab-pane>
              <el-tab-pane label="Config">Config</el-tab-pane>
              <el-tab-pane label="Role">Role</el-tab-pane>
              <el-tab-pane label="Task">Task</el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item prop="delivery">
            <el-button style="margin:30px auto 0;">上一步，填写商品促销</el-button>
            <el-button type="primary" style="margin:30px auto 0;">下一步，填写商品属性</el-button>
          </el-form-item>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import * as http from '@/request/api'

const productCategoryId = ref('')//商品分类
// 商品分类
interface ICategory {
  value: string,
  label: string,
  children: {}[],
}
const Category = reactive<ICategory[]>([])

const active = ref(1)
const checkList = ref()
const radio1 = ref()

</script>
  
<style scoped>
.proCard {
  margin: 20px auto;
  width: 900px;
  padding-top: 30px;
}

.list {
  margin: 50px;
  width: 70%;
}
</style>